<template>
  <div class="workbench-summarylist-percent row">
      <div class="circle1"></div>
      <div class="num">
        <el-tooltip class="item" effect="dark" transition="" :content="isWarn ? $t('workbench.todayNewTip') :percentDesc" placement="left">
          <span style="cursor: pointer">{{percentDesc}}</span>
        </el-tooltip>
      </div>
      <div style="padding: 0px 10px;padding-top:8px;float: left; color: #878787">|</div>
      <div class="percent">{{percent}}<span>%</span></div>
      <div class="percent-left">
        <div class="num1"><span class="lnum">{{completeDesc}}</span><span class="rnum">{{data.complete}}</span></div>
        <div class="num2"><span class="lnum">{{uncompleteDesc}}</span><span class="rnum">{{(data.all - data.complete>=0?data.all - data.complete:0)}}</span></div>
      </div>
  </div>

</template>
<script>
  export default {
    name: 'summaryPercent',
    // isWarn是呼入数据有一个警告说明，其他字段没有
    props: ['data', 'color', 'completeDesc', 'uncompleteDesc', 'percentDesc', 'isWarn'],
    data () {
      return {
        circle0: false,
        wth0: true

      }
    },
    computed: {
      percent: function () {
        var num
        if (this.data.all === 0) {
          num = 100
        } else {
          num = Math.round(100 * this.data.complete / this.data.all)
          if (num > 100) {
            num = 100
          }
        }
        if (num < 50) {
          this.circle0 = false
          this.wth0 = true
        } else if (num > 50) {
          this.circle0 = true
          this.wth0 = false
        }
        return num
      }
    }
  }
</script>
<style lang="stylus" scoped>
  @import "styl/_workbench.styl"
  @import '../../../assets/common.styl'
  .wrap
  .circle
    position absolute
    height 40px
  .wrap
    position relative
  .circle
    box-sizing border-box
    border 3px solid #f7f7f7
    clip rect(0, 50px, 50px, 25px)
  .percent1
    width: 100%;
    height: 3px
    background-color #e6e6e6
    margin-top 5px
    margin-bottom 15px
    position relative
  .percent2
    width: 100%;
    height: 3px
    background-color #e6e6e6
    position relative
  .clip-auto
    clip rect(auto, auto, auto, auto)
  .percent
    float left
    top -3px
    left -3px
    color #878787
    width 31px
    padding-top 8px
  .left
    transition transform ease
    border 3px solid blue
    clip rect(0, 25px, 50px, 0)

  .right
    border 3px solid blue
    clip rect(0, 50px, 50px, 25px)


  .wth0
    width 0


  .num
    width 60px
    text-align left
    font-size 12px
    background-color $cf-white
    color $cf-gray2
    z-index 1
    float left
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    padding-top 8px
  .circle1
    border 1px solid #0084ff
    background-color #b6dcff
    border-radius 50%
    width 9px
    height 9px
    float left
    margin-top 11px
    margin-right 10px
  .percent-describ
    color $cf-gray4
    font-size 12px
    .percent
      font-size 24px
  .workbench-summarylist-percent
    height 42px
    margin 0px 10%
    display: flex;
    justify-content: center;
    .el-col-7
      margin-top -3px
      padding 0

    .el-col-17
      padding-right 18px
  .percent-left
    color $cf-gray4
    float left
    margin-left 8%
    white-space: nowrap
    .num1
      line-height 12px
      margin-bottom 8px
      width 95px
      .lnum
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        max-width: 80px;
        float: left;
      .rnum
        font-size 14px
        font-weight 500
        padding-left 3px
    .num2
      line-height 12px
      width 95px
      .lnum
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        max-width: 80px;
        float: left;
      .rnum
        font-size 14px
        font-weight 500
        padding-left 3px
  .percent-right
    width calc(100% - 130px)
    height 100%
    white-space nowrap

  .percent-bar-common
    height 3px
    line-height 3px
    font-size 12px
    color $cf-gray3
    text-indent 5px

  .percent-right-complete
    background-color $cf-color1
    margin-bottom 1px
    position absolute
    right 0
    @extend .percent-bar-common

  .percent-right-uncomplete
    background-color $c-border2
    position absolute
    right 0
    @extend .percent-bar-common

  .icon
    width 30px
    height 30px
    margin 6px 0 0 25px
    font-size 30px
    color $c-sub

  .workbench-summarylist-percent
    .im_icon
      background-position center -37px
    .internet_icon
      background-position center -76px
    .app_icon
      background-position center -118px
    .mail_icon
      background-position center -155px
    .cdr_icon
      background-position center 1px
  .call-in
    font-size 24px
    margin-top 8px
  .charts
    position relative
</style>
